:hover и элементы страницы

[Morph]

Для меня было приятным открытием узнать, что :hover можно применять не только к ссылкам. Это есть в описании :hover, но пока все примеры были привязаны к тегу <a>, в голову не приходило, что может быть иначе.

Я сделал div(div:hover img {opacity: 1}), внутри картинка (opacity: 0.75) и список с ссылками (a:hover {text-decoration: underline}, остальные состояния - text-decoration: none). Соответственно, при наведении мышки на div, картинка становится непрозрачной, при наведении на ссылку получаем подчеркивание.

После пары экспериментов возник вопрос: если мне нужно, чтобы при наведении на один объект менялись свойства другого, не вложенного в первый, каким способом этого достичь? Можно ли обойтись html/css или помогут только скрипты?

[USF]

да

http://jsfiddle.net/usfe/8yCx2/

[amelice]

1. для потомков: li:hover a{}.

2. для сестринских элементов: a:hover + span{}

3. для дочерних элементов: .parent:hover > .children {}.

На 2 пункта есть уже примеры, на третий вариант вот такой примерчик: http://jsfiddle.net/QrVx7/

Возможно еще есть варианты, было бы интересно посмотреть.

UPD: я извиняюсь, не по теме ответила, но, ладно, пусть будет. Тем более возможны еще другие варианты.

Edited September 8, 2012 by amelice

[USF]

amelice

, если ваш примерчик немного доработать, то получится вот так - > http://jsfiddle.net/usfe/QrVx7/1/

в принципе .parent > .children:hover это все равно что .parent:hover > .children:hover

[Morph]

шикарно.

спасибо.

[amelice]

amelice

, если ваш примерчик немного доработать, то получится вот так - > http://jsfiddle.net/usfe/QrVx7/1/

в принципе .parent > .children:hover это все равно что .parent:hover > .children:hover

отлично, еще варианты есть?